<template>
  <main-card :title="detailData.name" :crumbs="crumbs" :main-body-style-obj="{ paddingBottom: '0px' }">
    <template #tool-btn>
      <collect-button
        btn-type="default"
        :default-status="collectStatus"
        msg="是否取消收藏此课程?"
        :favorite-obj-type="1"
        :favorite-obj-name="detailData?.name"
        :favorite-obj-id="CLASS_ID"
      />
    </template>
    <div>
      <div class="page">
        <switch-tabs :tabs="tabList" :selected-tab="selectedTab" @switchTab="selectSwitchTable" />
        <div v-show="selectedTab === '1'" class="components-main">
          <video-page ref="videoRef" :data="videoList" :spans="spansObj" :title="detailData.name" />
        </div>
        <div v-show="selectedTab === '2'" class="components-main">
          <document-page :spans="spansObj" :document="documentList" />
        </div>
        <div v-show="selectedTab === '3'" class="components-main">
          <attachment :spans="spansObj" :attachment-list="attachmentList" />
        </div>
      </div>
    </div>
  </main-card>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import CollectButton from '@/components/CollectButton/index.vue'
  import SwitchTabs from '@/components/SwitchTabs/index.vue'
  import { classSquareApi } from '@/services/api'

  import { ClassDetailsType, FilesStatusType } from '../types/index'
  import Attachment from './components/Attachment.vue'
  import DocumentPage from './components/DocumentPage.vue'
  import VideoPage from './components/VideoPage.vue'

  interface TabList {
    key: string
    name: string
    classId: string | undefined
  }
  let route = useRoute()

  let CLASS_ID = route.params.id as string

  const detailData = ref<ClassDetailsType>({
    name: ''
  })

  const collectStatus = ref<boolean>(false)

  const crumbs = ref()

  // 视频
  const videoRef = ref()

  // 通过id查询课程详情
  const getClassDetails = async () => {
    try {
      let { data } = await classSquareApi.getSquire(CLASS_ID)()
      detailData.value.name = data.name
      // 数据集合
      videoList.value = data.videoUrls
      documentList.value = data.docUrls
      attachmentList.value = data.attachments
      crumbs.value = [{ name: '课程广场', path: '/class-square' }, { name: data.name }]
      // 收藏按钮
      collectStatus.value = data.favorite
      setTabs(data)
    } catch (error: any) {}
  }

  let tabList = ref<Array<TabList>>([])
  let selectedTab = ref<string>()

  const spansObj = ref<any>({})
  const selectSwitchTable = (index: string) => {
    selectedTab.value = index
    // 在点击时获取当前的列表
    // 如果不是视频界面那么暂停
    if (index !== '1') {
      videoRef.value.pauseVideo()
    }
  }

  const videoList = ref<FilesStatusType[]>([])

  const documentList = ref<FilesStatusType[]>([])
  const attachmentList = ref<FilesStatusType[]>([])

  const setTabs = (obj: ClassDetailsType) => {
    spansObj.value['title'] = obj.name
    spansObj.value['labelList'] = obj.categories
    spansObj.value['content'] = obj.description
    spansObj.value['classification'] = obj.levels
    if (obj.videoUrls && obj.videoUrls.length > 0) {
      tabList.value.push({
        key: '1',
        name: '视频',
        classId: obj.id
      })
      selectedTab.value = '1'
      videoList.value = obj.videoUrls
    }
    if (obj.docUrls && obj.docUrls.length > 0) {
      documentList.value = obj.docUrls
      tabList.value.push({
        key: '2',
        name: '文档',
        classId: obj.id
      })
      if (selectedTab.value !== '1') selectedTab.value = '2'
    }

    if (obj.attachments && obj.attachments.length > 0) {
      attachmentList.value = obj.attachments
      tabList.value.push({
        key: '3',
        name: '附件',
        classId: obj['id']
      })
      if (selectedTab.value !== '1') selectedTab.value = '3'
    }
  }

  onMounted(() => {
    getClassDetails()
  })
</script>
<style lang="less" scoped>
  .page {
    padding: 0;
    width: 100%;
  }

  .components-main {
    margin-top: 16px;
    width: 100%;
    height: 100%;
  }
</style>
